<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>忘记密码</title>
    <meta name="decorator" content="cms_default_zcm"/>

    <link href="${ctxStatic}/jquery-validation/1.11.1/jquery.validate.min.css" type="text/css" rel="stylesheet" />
    <script src="${ctxStatic}/jquery-validation/1.11.1/jquery.validate.min.js" type="text/javascript"></script>
    <script src="${ctxStatic}/jquery-validation/1.11.1/jquery.validate.method.min.js" type="text/javascript"></script>
    <script>

        function SendMessage(){
            $.ajax({
                url : "${ctx}/smgForgetPasswd",
                // 设置请求方法
                data:{"mobile":$('#mobile').val()},
                type : 'POST',
                dataType : 'JSON',
                // 成功回调
                success : function(result) {
                    $("#inputForm1").hide();
                    $("#inputForm2").show();
                    $("#inputForm3").hide();
                },
                // 失败回调
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        }
        var mobileFlag = 0;
        $(document).ready(function() {
            $("#inputForm1").show();
            $("#inputForm2").hide();
            $("#inputForm3").hide();
            $.validator.setDefaults({
                submitHandler: function(vv) {
                    if(!$("#inputForm1").is(":hidden")){
                        SendMessage();

                    }else if(!$("#inputForm2").is(":hidden")){
                        $("#inputForm1").hide();
                        $("#inputForm2").hide();
                        $("#inputForm3").show();
                    }else if(!$("#inputForm3").is(":hidden")){

                        $.ajax({
                            url: "${ctx}/forgetPwd",
                            // 设置请求方法
                            data: $(".form").find("input").serialize(),
                            type: 'POST',
                            dataType: 'JSON',
                            // 成功回调
                            success: function (result) {
                                alert(result.message);
                                if (result.success) {
                                    window.location.href = "${ctx}/forgetPwd";
                                    return;
                                }
                            },
                            // 失败回调
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert(textStatus);
                            }
                        });
                    }
                }
            });
            $("#validateCode").removeAttr("style");
            $("#validateCode").siblings("img").addClass("code");
            jQuery.validator.addMethod("isMobile", function(value, element) {
                var tel = /^(0|86|17951)?(1[345789])[0-9]{9}$/
                return this.optional(element) || (tel.test(value));
            }, "请填写正确的手机号码");
            var validConfig = {
                rules: {
                    validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"},
                    coder: {remote: "${ctx}/validMobileForget"},
                    mobile:{remote: "${ctx}/existsMobile"},
                    password: {
                        required: true,
                            minlength: 5
                    },
                    confirm_password: {
                        required: true,
                            minlength: 5,
                            equalTo: "#password"
                    },
                },
                messages: {
                    validateCode: {remote: "验证码不正确"},
                    coder: {remote: "短信验证码不正确"},
                    mobile: {remote: "该手机号未注册。",isMobile:"请输入正确的手机号"
                    },
                },
                errorElement:"span",
                    errorClass:"error",
                success:function(span) {
                //alert(span.attr("for"));
                    span.html("&nbsp;").removeClass("error").addClass("valid");
                //label.addClass("valid").text("Ok!")
                 }
                // errorPlacement:function(error,element) {
                //     error.after(element);
                //     //error.appendTo(element.parent("td").next("td"));
                // }
            };
            $("#inputForm1").validate(validConfig);
            $("#inputForm2").validate(validConfig);
            $("#inputForm3").validate(validConfig);
        });
    </script>
</head>
<body>

<section class="g-bannerTop" style="background-image: url(${ctxStatic}/zcm/images/banner71.png);"></section>

<section class="content section71">
    <div class="title">找回密码</div>
    <ul class="form">
        <form:form id="inputForm1">
        <li><span class="tt"><i class="red">*</i>输入手机号：</span>
            <input maxlength="50" class="required isMobile" type="text" id="mobile" name="mobile" placeholder="请输入手机号">
        </li>
        <li class="yzm"><span class="tt"><i class="red">*</i>输入验证码：</span>
            <sys:validateCode name="validateCode" inputCssStyle="required"/>
        </li>
            <li class="operate">
                <input type="submit" value="下一步" class="btn">
            </li>
        </form:form>
        <form:form id="inputForm2">
        <li><span class="tt"><i class="red">*</i>请输入短信验证码：</span>
            <input type="text" class="required" id="coder" name="coder" placeholder="请输入短信验证码">
        </li>
            <li class="operate">
            <input type="submit" value="下一步" class="btn">
        </li>
        </form:form>
        <form:form id="inputForm3">
        <li><span class="tt"><i class="red">*</i>请输入新密码：</span><input type="password" id="password" name="password" placeholder="请输入新密码"></li>
        <li><span class="tt"><i class="red">*</i>再次输入新密码：</span><input type="password" id="confirm_password" name="confirm_password" placeholder="请再次输入新密码"></li>
        <li class="operate">
            <input type="submit" id="confirmBtn" value="确定" class="btn">
        </li>
    </ul></form:form>

</section>

</body>
</html>

